<template>
  <div class="main" id="main">
      <!-- 首页视图 -->
      <!-- 广告 -->
      <div>
          <Adver style="width:60%"></Adver>
      </div>
      <!-- 搜索 -->
      <div class="search" :style="flexd?'position:fixed;top:0px;width:100%':''">
           <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
            <el-select style="width:100px;background:#ffcd35;color:#000" v-model="search" slot="prepend" placeholder="请选择">
            <el-option label="用户" value="1"></el-option>
            <el-option label="专辑" value="2"></el-option>
            </el-select>
            <el-button @click="searchs()" slot="append" style="background:#ffcd35" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <!-- 轮播图 -->
      <div>
          <SlideShow></SlideShow>
      </div>
      <!-- 切换内容 -->
      <div class="toggerContent">
          <div class="toogerButton" :style="clickType==1?'background:#ffed97':''">
            <a href="javascript:;" @click="clickType=1;togger()" class="" >精品推送</a>
          </div>
          
          <div class="toogerButton" @click="clickType=2;togger()" :style="clickType==2?'background:#ffed97':''">
            <a href="javascript:;" class="" >关注推送</a>
          </div>
      </div>

      <!-- 内容区 -->
      <div class="content">

          <!-- 内容 -->
          <div class="node">
           <p style="padding:10px;border-left:3px solid rgb(35, 216, 38)" v-show="node.length<1">
            今日没有好友发布新内容    
          </p>
              <Node v-for="item in node " :key="item.index" :node="item"></Node>
              <LoadAllButton v-show="node.length>1" :load="loadd" @load="load"></LoadAllButton>
              
          </div>
          <!-- 推荐关注 -->
          <div class="attention">
              <!-- 标签推广 -->
              <TarSend></TarSend>
              <Attention></Attention>
              <ADVER v-if="adver!=null">
                  <template slot="adver">
                    <img style="padding:10px" src="@/assets/图层 4.png" width="50%" height="100%">
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=746381864&site=qq&menu=yes"><img style="padding:10px" src="@/assets//23.png" width="50%" height="100%"></a>
                      
                   </template>
              </ADVER>
          </div>
      </div>
  </div>
  
</template>

<script>
import Adver from "@/components/advertising/advertising"
import SlideShow from "@/components/slideshow/slideshow"
import Node from "@/components/node/node"
import Attention from "@/components/attention/attention"
import TarSend from "@/components/attention/tarsend"
import LoadAllButton from "@/components/button/loadAllButton"
import ADVER from "@/components/attention/adver"
export default {
    components:{Adver,SlideShow,Attention,Node,TarSend,LoadAllButton,ADVER},
    data(){
        return{
            adver:null,
            loadd:false,
            search:"1",
            searchValue:null,
            clickType:1,
            selectAll:false,
            flexd:false,
             node:null,
            // pageHeight:null,
        }
    },
    mounted(){
        // 先给页面注册滚动事件
         document.documentElement.scrollTop=0
        document.addEventListener('scroll',this.Scroll, true)
  
        this.init();
    },
    methods:{
        searchs(){
            this.$http.get("/querty/"+this.search+"/"+this.searchValue).then(va=>{
                this.$alert(va.data.message)
                if(va.data.code==200){
                    if(this.search=="1"){
                        this.$router.push("/personcenter/"+va.data.data)
                    }else{
                        this.$router.push("/album/"+va.data.data)
                    }
                }
            })
        },
          Scroll(){

              var srctop = document.documentElement.scrollTop

              if(srctop>500){
                this.flexd=true
              }else{
                  this.flexd=false
              }
            //   下拉刷新 待定
            //  if(srctop >= this.pageHeight){
                 
            //      // 下拉刷新
            //      this.load()
            //  }
             
        },
        load(){
            this.loadd=true
            this.$http.get("/node/getNodes").then(va=>{
                if(va.data.code==200){
                    for(var i = 0 ; i<va.data.data.length;i++){
                            this.node.push(va.data.data[i])
                    }
                    this.loadd=false
                    // 下拉刷新完毕 更新页面高度
                    // this.pageHeight=document.getElementById("main").clientHeight

                }else{
                    this.$alert("发生了异常")
                }
            })
        },
        init(){
            this.$http.get("/node/getNodes").then(va=>{
                if(va.data.code==200){
                    this.node=va.data.data
                }else{
                    this.$alert("发生了异常")
                }
            })
        },
        init2(){
            this.$http.get("/fans/bznodes").then(va=>{
                if(va.data.code==200){
                    this.node=va.data.data
                }else{
                    this.$alert("发生了异常")
                }
            })
        },
        togger(){
            switch(this.clickType){
                case 1:
                    this.init()
                    break
                case 2:
                    this.init2()
                    break
            }
        }
    },
    created(){
        document.title="waterghost-万能头像库"
        // this.init();
        // this.pageHeight=document.getElementById("main").clientHeight
    }
}
</script>

<style scoped lang="less">
    .main{
       
        width: 100%;
        height: auto;
        // background: yellow;
        margin-top: 40px;
    }
    .search{
        z-index: 333;
        width: 60%;
        margin: 10px auto;
    }
    .toggerContent{
        width: 60%;
        height: 40px;
        margin: 20px auto;
        // background: red;
        .toogerButton{
            width: 100px;
            height: 35px;
            background: #f9d268;
            border-radius:10px;
            padding:5px;
            padding-left: 10px;
            padding-right: 15px;
            float: left;
            margin-right: 10px;
            a{
                height: 100%;
                border-left: 5px solid #a57c00;
                display: block;
                line-height: 25px;
                color: #000;
                text-decoration: none;
                font-size: 15px;
                text-align: right;
            }

        }
    }
    .fore{
        width: 100%;
        height: 80px;
        position: relative;
        background: #fff;
        // background: #000;
        line-height:40px;
        p{
            font-family: ht;
            
        }
    }
    .content{
        width: 60%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        height: auto;
        .node{
            width: 60%;
            height: 100%;
            // background: palegoldenrod;
            padding: 5px;
        }
        .attention{
            width: 40%;
            height:auto;

        }
    }
    .updateNode{
        background: #f9d268;
        border: none;
        width: 100px;
        height: 30px;
        border-radius: 10px;
        text-align: center;
        line-height: 30px;
        margin: 10px auto;
        display: block;
        cursor: pointer;
    }
     @media  screen and (max-width: 1300px) {
         .content{
             width: 100%;
             display: block;
         }
         .attention{
             width: 100% !important;
         }
         .node{
             width: 100% !important;
         }
         .search{
             width: 100% !important;
             left: 0px !important;
         }
     }
     @media  screen and (min-width: 1900px) {
         .node{
             width: 70% !important;
        }
        .attention{
            width: 30% !important;
        }
         
     }
     //2px solid #f9f8f7
</style>